<template>
<div class="note-example-box">
	<el-button @click='fn1'>{{count1}}:{{count2}}</el-button>
	<div class="note-code-case">
		<textarea :value='codeVal' disabled style="height: 360px;"></textarea>
	</div>
</div>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
const count1 = ref(1);
const count2 = computed(() => {
	return count1.value * 2
});
const fn1 = () => {
	count1.value++;
}
watch(count1, (newName, oldName) => {
	console.log('watch count1', newName, oldName);
});

//对应代码
const codeVal = `<template>
<el-button @click='fn1'>{{count1}}:{{count2}}</el-button>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
const count1 = ref(1);
const count2 = computed(() => {
	return count1.value * 2
});
const fn1 = () => {
	count1.value++;
}
watch(count1, (newName, oldName) => {
	console.log('watch count1', newName, oldName);
});
<script>`;
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>